$f: 19.2;

*, *::after, *::before {
  box-sizing: border-box;
}
.header{
  .logo{
    img{
      transition: .6s ease;
    }
    p{
      transition: .6s ease;
    }
  }
}
.index_on{
  background: transparent !important;
  .logo{
    .slogo{
      img:nth-child(1){
        opacity: 1;
      }
      img:nth-child(2){
        opacity: 0;
      }
    }
    p{
      color: #fff;
    }
  }
  .links{
    a{
      color: #fff;
    }
    .cbtn{
      svg{
        path{
          fill: #fff;
        }
      }
      p{
        color: #fff;
      }
    }

  }
  .btns{
    a{
      color: #fff;
      border: 1px solid #fff;
    }
  }
}

.common_bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.section1{
  position: relative;
  z-index: 1;
  height: 692/$f+vw;
  .position{
    position: absolute;
    right: 47/$f+vw;
    bottom: 12/$f+vw;
    z-index: 5;
    .item{
      width: 52/$f+vw;
      height: 52/$f+vw;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      @keyframes lineAnimate {
        100%{
          stroke-dashoffset: 17px;
        }
      }
      &.on{
        p{
          transform: scale(1.4);
          color: #fff;
        }
        svg{
          .path-loop-bg{
            opacity: 1;
          }
          .path-loop{
            animation: lineAnimate 5s linear forwards;
          }
        }
      }
      &:not(:last-child) {
        margin: 0 0 15/$f+vw;
      }
      p{
        color: rgba(255, 255, 255, 0.50);
        text-align: right;
        font-size: 20/$f+vw;
        font-style: normal;
        font-weight: 400;
        transition: .6s ease;
      }
      svg{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 125%;
        height: 125%;
        .path-loop-bg{
          fill: none;
          stroke: rgba(255,255,255,.2);
          stroke-miterlimit: 10;
          stroke-width: 2px;
          opacity: 0;
          transition: .6s ease;
        }
        .path-loop{
          stroke-dashoffset: 157px;
          fill: none;
          stroke: #fff;
          stroke-miterlimit: 10;
          stroke-width: 2px;
          transition: 0.6s;
        }
      }
    }
  }
  .swiper{
    width: 100%;
    height: 100%;
    .swiper-wrapper{
      .swiper-slide{
        display: flex;
        align-items: center;
        padding: 0 270/$f+vw;
        &.swiper-slide-active{
          .content{
            h1,p,.more{
              transition: 1s;
              opacity: 1;
              transform: translateY(0);
              transition-delay: .3s;
            }
            p{
              transition-delay: .5s;
            }
            .more{
              transition-delay: .7s;
            }
          }
        }
        &:after{
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: rgba(0,0,0,.3);
        }
        .content{
          position: relative;
          z-index: 2;
          h1{
            color: #FFF;
            font-size: 46/$f+vw;
            font-style: normal;
            font-weight: 600;
            margin: 0 0 30/$f+vw;
            opacity: 0;
            transform: translateY(20px);
          }
          p{
            font-size: 20/$f+vw;
            font-style: normal;
            font-weight: 400;
            color: #fff;
            opacity: 0;
            transform: translateY(20px);
          }
          .more{
            margin: 36/$f+vw 0 0 0;
            width: 108/$f+vw;
            height: 38/$f+vw;
            border-radius: 4/$f+vw;
            background: #1A53F0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFF;
            font-size: 18/$f+vw;
            font-style: normal;
            font-weight: 400;
            opacity: 0;
            transform: translateY(20px);
          }
        }
      }
    }
  }
}

.section2{
  height: 251/$f+vw;
  background: #F8F8F8;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .item{
    display: flex;
    align-items: center;
    &:not(:last-child) {
      margin: 0 263/$f+vw 0 0;
    }
    .icon{
      width: 56/$f+vw;
      height: 56/$f+vw;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 18/$f+vw 0 0;
      img{
        width: 100%;
        object-fit: contain;
      }
    }
    .text{
      .dis{
        display: flex;
        align-items: center;
        span,.p1{
          color: #000;
          text-align: center;
          font-size: 40/$f+vw;
          font-style: normal;
          font-weight:500;
          line-height: 40/$f+vw; /* 100% */
        }
      }
      p{
        margin: 9/$f+vw 0 0 0;
        text-align: center;
        font-size: 16/$f+vw;
        font-style: normal;
        font-weight: 400;
      }
    }
  }
}

.section3{
  padding: 105/$f+vw 260/$f+vw 90/$f+vw 260/$f+vw;
  .top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    h1{
      color: #000;
      font-size: 40/$f+vw;
      font-style: normal;
      font-weight: 600;
      letter-spacing: 2/$f+vw;
    }
    .other{
      display: flex;
      align-items: center;
      .cut{
        display: flex;
        gap: 0 80/$f+vw;
        .list{
          color: #000;
          font-size: 24/$f+vw;
          font-style: normal;
          font-weight: 400;
          letter-spacing: 2/$f+vw;
          cursor: pointer;
          position: relative;
          &.on,&:hover{
            &:after{
              transform: scaleX(1);
            }
          }
          &:after{
            content: '';
            position: absolute;
            width: 100%;
            height: 2/$f+vw;
            background: #1A53F0;
            bottom: -12/$f+vw;
            left: 0;
            transition: .6s ease;
            transform: scaleX(0);
            transform-origin: left;
          }
        }
      }
      .more{
        display: flex;
        align-items: center;
        margin: 0 0 0 98/$f+vw;
        p{
          color: #000;
          font-size: 24/$f+vw;
          font-style: normal;
          font-weight: 600;
          margin: 0 20/$f+vw 0 0;
        }
        svg{
          width: 10/$f+vw;
          height: fit-content;
        }
      }
    }
  }
  .content{
    margin: 44/$f+vw 0 0 0;
    position: relative;
    .matter{
      pointer-events: none;
      width: 100%;
      opacity: 0;
      transform: translateY(20px);
      &:not(:first-child) {
        position: absolute;
        top: 0;
        left: 0;
      }
      &.on{
        transition: 1s;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        .t{
          .tSwiper{
            .swiper-slide{
              pointer-events: auto;
              a{
                display: block;
              }
            }
          }
        }
      }
      .t{
        display: flex;
        justify-content: center;
        height: 568/$f+vw;
        .tSwiper{
          width: 756/$f+vw;
          height: 100%;
          .swiper-slide{
            pointer-events: none;
          }
          img{
            width: 100%;
            height: 100%;
          }
        }
        .r{
          width: 644/$f+vw;
          height: 100%;
          padding: 72/$f+vw 0 60/$f+vw 43/$f+vw;
          .flex_list{
            display: none;
            &.on{
              display: block;
              animation: yAnimate .6s ease forwards;
            }
            .time{
              color: #707070;
              font-size: 20/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: normal;
              margin: 0 0 28/$f+vw;
            }
            h1{
              color: #000;
              font-size: 36/$f+vw;
              font-style: normal;
              font-weight: 500;
              line-height: normal;
              margin: 0 0 29/$f+vw;
            }
            p{
              color: #333;
              font-size: 20/$f+vw;
              font-style: normal;
              font-weight: 400;
              line-height: 30/$f+vw; /* 150% */
            }
          }
          .swiper-pagination{
            width: fit-content;
            position: static;
            transform: none;
            margin: 100/$f+vw 0 0 0;
            span{
              width: 6/$f+vw;
              height: 6/$f+vw;
              background: #E5E5E5;
              margin: 0 15/$f+vw 0 0!important;
              opacity: 1;
              transition: .6s ease;
              &.swiper-pagination-bullet-active{
                background: #1A53F0;
              }
              &:last-child{
                margin: 0;
              }
            }
          }
        }
      }
    }
  }
  .smallSwiper{
    margin: 40/$f+vw 0 0 0;
    position: relative;
    .button{
      position: absolute;
      left: 0;
      padding: 0 13/$f+vw;
      top: 125/$f+vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      z-index: 2;
      width: 100%;
      .circle{
        pointer-events: auto;
        width: 40/$f+vw;
        height: 40/$f+vw;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.10);
        border-radius: 50%;
        cursor: pointer;
        &:last-child{
          transform: rotate(180deg);
        }
        svg{
          width: 12/$f+vw;
        }
      }
    }
    .swiper-wrapper{
      .swiper-slide{
        .item{
          width: 100%;
          display: block;
          &:hover{
            .img{
              img{
                transform: scale(1.05);
              }
            }
          }
          .img{
            width: 100%;
            height: 306/$f+vw;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
              transition: .6s ease;
            }
          }
          .text{
            padding: 23px;
            color: #333;
            font-size: 18/$f+vw;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 0.36px;
          }
        }
      }
    }
  }
}
.section4{
  background: #F8F8F8;
  padding: 117/$f+vw 312/$f+vw 141/$f+vw 312/$f+vw;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 160/$f+vw 276/$f+vw;
  .item{
    .img{
      width: 102/$f+vw;
      height: 102/$f+vw;
      margin: 0 auto 40/$f+vw;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        object-fit: contain;
        transition: all 600ms;
      }
      &:hover{
        img{
          transform: rotateY(360deg);
        }
      }
    }
    .text{
      text-align: center;
      h1{
        color: #121212;
        font-size: 32/$f+vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin: 0 0 15/$f+vw;
      }
      p{
        color: #747474;
        font-size: 20/$f+vw;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }
    }
  }
}
@keyframes yAnimate {
  0%{
    opacity: 0;
    transform: translateY(20px);
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

img{
  object-fit: cover;
}

.fixed_alert{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 10/$f+vw;
  z-index: 99;
  display: inline-flex;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4/$f+vw;
  border-radius: 12/$f+vw;
  background: #FFF;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.10);
  opacity: 0;
  pointer-events: none;
  transition: 1s;
  &.on{
    opacity: 1;
    pointer-events: auto;
  }
  .item{
    display: flex;
    height: 90/$f+vw;
    padding: 4/$f+vw 8/$f+vw;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4/$f+vw;
    align-self: stretch;
    border-radius: 8/$f+vw;
    border: 1/$f+vw solid #F6F6F6;
    background: #F6F6F6;
    transition: .6s ease;
    cursor: pointer;
    position: relative;
    .code{
      position: absolute;
      top: -48/$f+vw;
      right: calc(100% + 12px);
      opacity: 0;
      transform: translateX(-10px);
      transition: .6s ease;
      pointer-events: none;
      svg{
        width: 132/$f+vw;
        height: 126/$f+vw;
      }
      img{
        width: 109/$f+vw;
        height: 109/$f+vw;
        position: absolute;
        top: 8/$f+vw;
        left: 8/$f+vw;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05));
      }
    }
    .tel{
      position: absolute;
      right: calc(100% + 12px);
      top: 6px;
      z-index: 5;
      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.05));
      opacity: 0;
      transform: translateX(-10px);
      transition: .6s ease;
      pointer-events: none;
      svg{
        width: 142/$f+vw;
        height: 46/$f+vw;
      }
      p{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 16/$f+vw;
        color: #333;
        font-size: 16/$f+vw;
        font-style: normal;
        font-weight: 400;
        z-index: 2;
        margin: 0;
      }
    }
    &:hover{
      background: #1A53F0;
      .tel,.code{
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
      }
      .svg{
        path{
          fill: #fff;
        }
      }
      &>p{
        color: #fff;
      }
    }
    .svg{
      width: 38/$f+vw;
      height: 38/$f+vw;
      margin: auto;
      svg{
        width: 100%;
        height: 100%;
        path{
          fill: #000;
          transition: .6s ease;
        }
      }
    }
    p{
      margin: 3/$f+vw 0 0 0;
      color: #333;
      font-size: 12/$f+vw;
      font-style: normal;
      font-weight: 400;
      transition: .6s ease;
    }
  }
}
@media screen and (max-width: 1024px) {
  .section1{
    margin: 60px 0 0 0;
    height: 350px;
    .position{
      right: 5%;
      bottom: 10px;
      .item{
        width: 30px;
        height: 30px;
        &:not(:last-child) {
          margin: 0;
        }
        p{
          font-size: 12px;
        }
      }
    }
    .swiper{
      .swiper-wrapper{
        .swiper-slide{
          padding: 0 5%;
          .content{
            h1{
              font-size: 24px;
              margin: 0 0 15px;
            }
            p{
              font-size: 14px;
              line-height: 1.8;
            }
            .more{
              margin: 20px 0 0 0;
              width: 84px;
              height: 30px;
              border-radius: 5px;
              font-size: 13px;
            }
          }
        }
      }
    }
  }
  .section2{
    height: auto;
    padding: 50px 5%;
    gap: 0 30px;
    .item{
      flex-direction: column;
      &:not(:last-child) {
        margin: 0 10px 0 0;
      }
      .icon{
        width: 40px;
        height: 40px;
        margin: 0 0 15px;
      }
      .text{
        .dis{
          justify-content: center;
          span,.p1{
            font-size: 24px;
            line-height: 1;
          }
        }
        p{
          font-size: 12px;
          margin: 5px 0 0 0;
        }
      }
    }
  }
  .section3{
    padding: 30px 5%;
    .top{
      flex-direction: column;
      align-items: unset;
      margin: 0 0 30px;
      h1{
        font-size: 24px;
        margin: 0 0 20px;
      }
      .other{
        flex-direction: column;

        align-items: unset;

        .cut{
          gap: 0 22px;
          .list{
            font-size: 14px;
            &:after{
              bottom: -5px;
              height: 2px;
            }
          }
        }
        .more{
          margin: 40px 0 0 0;
          p{
            font-size: 13px;
            margin: 0 10px 0 0;
          }
          svg{
            width: 7px;
          }
        }
      }
    }
    .content{
      .matter{
        .t{
          flex-direction: column;
          height: auto;
          .tSwiper{
            width: 100%;
            margin: 0;
          }
          .r{
            width: 100%;
            height: auto;
            padding: 20px 5%;
            .flex{
              .flex_list{
                .time{
                  font-size: 14px;
                  margin: 0 0 10px;
                }
                h1{
                  font-size: 20px;
                  margin: 0 0 15px;
                }
                p{
                  font-size: 12px;
                  line-height: 1.9;
                }
              }
            }
            .swiper-pagination{
              span{
                width: 6px;
                height: 6px;
                margin: 0 12px 0 0!important;
                &:last-child{
                  margin: 0!important;
                }
              }
            }
          }
        }
      }
    }
    .smallSwiper{
      width: 100%;
      .swiper-wrapper{
        .swiper-slide{
          .item{
            .img{
              height: auto;
            }
            .text{
              padding: 15px;
              font-size: 13px;
              line-height: 30px;
            }
          }
        }
      }
      .button{
        position: static;
        width: fit-content;
        margin: 10px auto 0;
        gap: 0 20px;
        .circle{
          width: 35px;
          height: 35px;
          svg{
            width: 10px;
          }
        }
      }
    }
  }
  .section4{
    padding: 50px 5%;
    grid-template-columns: repeat(2,1fr);
    gap: 30px 30px;
    .item{
      .img{
        width: 45px;
        height: 45px;
        margin: 0 auto 15px;
      }
      .text{
        h1{
          font-size: 20px;
          margin: 0 0 15px;
        }
        p{
          font-size: 11px;
          line-height: 1.7;
        }
      }
    }
  }
  .fixed_alert{
    display: none;
  }
}